import cs from 'classnames'
import Image from 'next/image'
import { useContext, useEffect, useState } from 'react'

import { GlobalContext } from '@/context'
import locale from '@/locale'
import styles from '@/styles/index.module.css'
import useLocale from '@/utils/useLocale'

export default function Header({
  show,
  onSubmit,
  handleMobile,
}: {
  handleMobile?: boolean
  show?: boolean
  onSubmit: (_: boolean) => void
}) {
  const { setLang, lang } = useContext(GlobalContext)
  const t = useLocale(locale)

  const [scrollHeight, setScrollHeight] = useState<number>(0)

  const scrollHandler = () => {
    const scrollHeight = window.scrollY
    setScrollHeight(scrollHeight)
  }
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', scrollHandler)
    }
  }, [])

  return (
    <>
      {handleMobile ? (
        <header
          className={cs(
            styles['header-mobile'],
            ' bg-white w-full flex justify-center h-[56px]',
            'top-0'
          )}
        >
          <div className="w-full flex items-center justify-between px-6 ">
            <Image
              src="/logo.svg"
              alt="logo Logo"
              width={69}
              height={28}
              priority
              onClick={() => {
                onSubmit(true)
              }}
            />
            <div
              className={cs(styles['header-lang'], 'flex items-center cursor-pointer ')}
              onClick={() => {
                setLang(lang == 'en-US' ? 'ar-EG' : 'en-US')
              }}
            >
              <span
                className={cs(
                  lang == 'en-US' ? 'Cairo' : 'Roboto-ipt',
                  'text-base font-normal px-2 text-[#7e8080]'
                )}
              >
                {t['header-lang']}
              </span>
              <Image src="/lang.png" alt="logo Logo" width={18} height={18} priority />
            </div>
          </div>
        </header>
      ) : (
        <header
          className={cs(
            styles['header'],
            'w-full flex justify-center h-[60px]',
            show ? 'top-0' : ''
          )}
          style={{ top: show ? '0px' : scrollHeight > 60 ? '0px' : -60 + scrollHeight + 'px' }}
        >
          <div className="w-full flex items-center justify-between px-[7.56rem] max-w-[1440px] mx-auto ">
            <Image
              src="/logo.svg"
              alt="logo Logo"
              width={89}
              height={36}
              priority
              onClick={() => {
                onSubmit(true)
              }}
              className="cursor-pointer"
            />
            <div
              className={cs(styles['header-lang'], 'flex items-center cursor-pointer ')}
              onClick={() => {
                setLang(lang == 'en-US' ? 'ar-EG' : 'en-US')
              }}
            >
              <span
                className={cs(
                  lang == 'en-US' ? 'Cairo' : 'Roboto-ipt',
                  'text-[15px] font-normal px-2 text-[#848484]'
                )}
              >
                {t['header-lang']}
              </span>
              <Image src="/lang.png" alt="logo Logo" width={21} height={21} priority />
            </div>
          </div>
        </header>
      )}
    </>
  )
}
